<template>
  <view>
    <van-tabbar :active="active" @change="tabbarChange">
      <van-tabbar-item>
        <!-- <span>账单</span> -->
        <image
          v-if="icon.normal0"
          slot="icon"
          :src="icon.normal0"
          mode="aspectFit"
          style="width: 50px; height: 25px"
        />
        <image
          v-if="icon.normal0"
          slot="icon-active"
          :src="icon.active0"
          mode="aspectFit"
          style="width: 50px; height: 25px"
        />
      </van-tabbar-item>

      <van-tabbar-item>
        <!-- <span>添加</span> -->
        <image
          slot="icon"
          :src="icon.normal1"
          mode="aspectFit"
          style="width: 50px; height: 30px"
        />
        <image
          slot="icon-active"
          :src="icon.active1"
          mode="aspectFit"
          style="width: 50px; height: 30px"
        />
      </van-tabbar-item>

      <!-- <van-tabbar-item>
        <span>图表</span>
        <image
          slot="icon"
          :src="icon.normal2"
          mode="aspectFit"
          style="width: 50px; height: 25px"
        />
        <image
          slot="icon-active"
          :src="icon.active2"
          mode="aspectFit"
          style="width: 50px; height: 25px"
        />
      </van-tabbar-item> -->
    </van-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      icon: {
        normal0: "/static/account/account_0.svg",
        active0: "/static/account/account_1.svg",
        normal1: "/static/account/add_0.svg",
        active1: "/static/account/add_1.svg",
        normal2: "/static/account/graph_0.svg",
        active2: "/static/account/graph_1.svg",
      },
    };
  },
  methods: {
    tabbarChange(e) {
      this.active = e.detail;
      this.$emit("tabSwitch", e.detail);
    },
  },
};
</script>

<style></style>

<style scoped></style>
